<template>
  <div class="Operation">
    <div class="abnormal">
      <div class="classification">
        <div id="echats_Abnormal"></div>
        <div class="Abnormal_classification">
          <p class="decompose" @click="Operation_Detail(1)">
            <span class="title">领取超时</span>
            <span class="number" style="color: #ffbb37">{{
              operList ? operList.receiveOverTime : '0'
            }}</span>
          </p>
          <p class="decompose" @click="Operation_Detail(2)">
            <span class="title">紧急超时</span>
            <span class="number" style="color: #fc6f5e">{{
              operList ? operList.urgentOverTime : '0'
            }}</span>
          </p>
          <p class="decompose" @click="Operation_Detail(10)">
            <span class="title">处理超时</span>
            <span class="number" style="color: #ea7ccc">{{
              operList ? operList.dealOverTime : '0'
            }}</span>
          </p>
          <p class="decompose" @click="Operation_Detail(11)">
            <span class="title">转三线处理超时</span>
            <span class="number" style="color: #9ec81e">{{
              operList ? operList.transferOverTime : '0'
            }}</span>
          </p>
          <p class="decompose" @click="Operation_Detail(3)">
            <span class="title">疑难超时</span>
            <span class="number" style="color: #aa5fff">{{
              operList ? operList.diffOverTime : '0'
            }}</span>
          </p>
          <p class="decompose" @click="Operation_Detail(4)">
            <span class="title">关联超时</span>
            <span class="number" style="color: #27d7b0">{{
              operList ? operList.relationOverTime : '0'
            }}</span>
          </p>
          <p class="decompose" @click="Operation_Detail(5)">
            <span class="title">数据变更超时</span>
            <span class="number" style="color: #007af5">{{
              operList ? operList.toCmsjOverTime : '0'
            }}</span>
          </p>
        </div>
      </div>
      <div class="classification">
        <div id="echats_process" @click="GoCurrentProcess()"></div>
        <div class="Abnormal_classification process_data">
          <p class="decompose first" @click="GoCurrentProcessList(6)">
            <span class="title">待领取</span>
            <span class="number" style="color: #fc6f5e">{{
              operList ? operList.unclaimed : '0'
            }}</span>
          </p>
          <p class="decompose four" @click="GoCurrentProcessList(7)">
            <span class="title">处理中</span>
            <span class="number" style="color: #007af5">{{
              operList ? operList.processing : '0'
            }}</span>
          </p>
          <p class="decompose three" @click="GoCurrentProcessList(8)">
            <span class="title">数据变更</span>
            <span class="number" style="color: #27d7b0">{{
              operList ? operList.toCmsj : '0'
            }}</span>
          </p>
          <p class="decompose three" @click="GoCurrentProcessList(12)">
            <span class="title">三线处理中</span>
            <span class="number" style="color: #9ec81e">{{
              operList ? operList.transferDeal : '0'
            }}</span>
          </p>
        </div>
      </div>
      <div class="rightBox">
        <div class="innerLayer" @click="Operation_Detail(9)">
          <span class="number">{{ operList ? operList.beforeUrgents : '0' }}</span>
          <!-- <span class="number">400</span> -->
          <span class="tip">当前紧急</span>
        </div>
        <div class="completed_resubmit">
          <div class="situation completed" @click="Operation_Detail(13)">
            <span class="title_tip" style="color: #5f6970">今日待完成</span>
            <span class="Num" style="color: #5f6970">{{
              operList ? operList.completedTodayCount : '0'
            }}</span>
          </div>
          <div class="situation completed" @click="Operation_Detail(15)">
            <span class="title_tip" style="color: #fb8f25">异常待处理</span>
            <span class="Num" style="color: #fb8f25">{{ Exception ? Exception : '0' }}</span>
          </div>
          <div class="situation" @click="Operation_Detail(14)">
            <span class="title_tip" style="color: #aa5fff">退回重提交</span>
            <span class="Num" style="color: #aa5fff">{{
              operList ? operList.resubmitCount : '0'
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <p class="title">
        <span>运维事件单</span>
      </p>
      <div class="tabEchart">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="工单总量" name="first">
            <div id="order_amountEcharts" style="width: 100%; height: 100%"></div>
          </el-tab-pane>
          <el-tab-pane label="重点系统" name="second">
            <div id="key_systemEcharts" style="width: 100%; height: 100%" v-show="image"></div>
            <div class="context" v-if="!image">
              <el-empty description="暂无数据" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span class="line"></span>
      <div class="ring">
        <p class="title">
          <span>运维事件单数量监控</span>
        </p>
        <div class="innerLayer three" @click="goData_monitoring('1')">
          <span class="number">
            {{ Abnormal_data?.earlyCount ? Abnormal_data?.earlyCount : 0 }}</span
          >
          <!-- <span class="number">400</span> -->
          <span class="tip">今日接收<br />预警系统</span>
        </div>
        <div class="innerLayer one" @click="goData_monitoring('2')">
          <span class="number">
            {{ Abnormal_data?.alarmCount ? Abnormal_data?.alarmCount : 0 }}</span
          >
          <!-- <span class="number">400</span> -->
          <span class="tip">今日接收<br />告警系统</span>
        </div>
        <div class="innerLayer two" @click="goData_monitoring('3')" v-if="false">
          <span class="number">
            {{ Abnormal_data?.backlogCount ? Abnormal_data?.backlogCount : 0 }}</span
          >
          <!-- <span class="number">400</span> -->
          <span class="tip">当前积压告警系统</span>
        </div>
        <div id="stock" @click="goData_monitoring('3')"></div>
      </div>
      <div class="ring" v-if="false">
        <div class="situation completed">
          <span class="type" style="color: #ff0000">红</span>
          <span class="typeNum" style="color: #ff0000">1</span>
        </div>
        <div class="situation completed">
          <span class="type" style="color: #ffff00">黄</span>
          <span class="typeNum" style="color: #ffff00">2</span>
        </div>
        <div class="situation">
          <span class="type" style="color: #ed702d">橙</span>
          <span class="typeNum" style="color: #ed702d">3</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, getCurrentInstance, watch, reactive, nextTick, onUpdated } from 'vue';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import {
    getFmbizs,
    getFmbizTotal,
    getFmbizTotalBySys,
    getFmkbSysValues
  } from '@/http/api/operation/index';
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const Abnormal_data = ref('');
  const activeName = ref('first');
  const operList = ref();
  const image = ref('true');
  onUpdated(() => {
    if (activeName.value == 'first') {
      nextTick(() => {
        getFmbizTotal_count();
      });
    } else if (activeName.value == 'second') {
      getFmbizTotalBySys_list();
    }
  });
  const router = useRouter();
  const Exception = ref('');
  // const count = ref('');
  // const pageNum = ref('1');
  // const pageSize = ref('5');
  const { proxy } = getCurrentInstance() as any;
  const myChart = ref<HTMLElement>();
  const myCharts = ref<HTMLElement>();
  const overstock = ref<HTMLElement>();
  const order_amount = ref<HTMLElement>(); // 工单总量
  const key_system = ref<HTMLElement>(); // 重点系统
  onMounted(() => {
    getFmkbSys();
    pirBox();
    pirBoxPend();
    Backlog_alarm();
    order_amountList();
    getFmbizs_list();
    getFmbizTotal_count();
    getFmbizTotalBySys_list();
    order_amountList_sys();
  });
  const getFmkbSys = () => {
    getFmkbSysValues().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      Abnormal_data.value = res.data.data;
      Backlog_alarm(Abnormal_data.value);
    });
  };
  const getFmbizs_list = () => {
    getFmbizs().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      operList.value = res.data.data;
      let {
        receiveOverTime,
        urgentOverTime,
        diffOverTime,
        relationOverTime,
        toCmsjOverTime,
        dealOverTime,
        transferOverTime
      } = operList.value ? operList.value : 0;
      Exception.value =
        Number(receiveOverTime) +
        Number(urgentOverTime) +
        Number(diffOverTime) +
        Number(relationOverTime) +
        Number(toCmsjOverTime) +
        Number(dealOverTime) +
        Number(transferOverTime);
      pirBox();
      pirBoxPend();
    });
  };
  const getFmbizTotal_count = () => {
    getFmbizTotal().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      const obj = reactive([]);
      const count = reactive([]);
      res.data.data.forEach((item) => {
        // (obj as any).push({
        //   dataTime: item.dateTime,
        //   bizCount: item.bizCount
        // });
        (obj as any).push(item.dateTime);
        (count as any).push(item.bizCount);
      });
      order_amountList(obj, count);
    });
  };
  const getFmbizTotalBySys_list = () => {
    getFmbizTotalBySys().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      const obj = reactive([]);
      const count = reactive([]);
      if (res.data.data.length) {
        image.value = true;
        res.data.data.forEach((item) => {
          // (obj as any).push({
          //   dataTime: item.dateTime,
          //   bizCount: item.bizCount
          // });
          (obj as any).push(item.sysName);
          (count as any).push(item.bizCount);
        });
        order_amountList_sys(obj, count);
      } else {
        image.value = false;
      }
    });
  };
  const pirBox = () => {
    if (myChart.value != null && myChart.value != '' && myChart.value != undefined) {
      myChart.value.dispose();
    }
    myChart.value = proxy.$ECharts.init(document.getElementById('echats_Abnormal'));
    let option;
    let {
      receiveOverTime,
      urgentOverTime,
      diffOverTime,
      relationOverTime,
      toCmsjOverTime,
      dealOverTime,
      transferOverTime
    } = operList.value ? operList.value : 0;
    const ary = ref(
      Number(receiveOverTime) +
        Number(urgentOverTime) +
        Number(diffOverTime) +
        Number(relationOverTime) +
        Number(toCmsjOverTime) +
        Number(dealOverTime) +
        Number(transferOverTime)
    );
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          silent: true,
          // lengendHoverLink: false,
          // animation:false,
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|当前异常}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              // c: {
              //     fontSize: 20,
              //     fontWeight: "bold",
              //     color: "#46545D ",
              //     lineHeight: "28",
              // },
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: ary.value,
              // value: 100,
              name: '当前异常',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: 'Access From',
          silent: true,
          // lengendHoverLink: false,
          // animation:false,
          type: 'pie',
          cursor: 'pointer',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          data: [
            {
              value: receiveOverTime ? receiveOverTime : 0,
              itemStyle: {
                color: '#FFBB37'
              }
            },
            {
              value: urgentOverTime ? urgentOverTime : 0,
              itemStyle: {
                color: '#FC6F5E'
              }
            },
            {
              value: dealOverTime ? dealOverTime : '',
              itemStyle: {
                color: '#ea7ccc'
              }
            },
            {
              value: diffOverTime ? diffOverTime : 0,
              itemStyle: {
                color: '#AA5FFF'
              }
            },
            {
              value: relationOverTime ? relationOverTime : 0,
              itemStyle: {
                color: '#27d7b0'
              }
            },
            {
              value: toCmsjOverTime ? toCmsjOverTime : 0,
              itemStyle: {
                color: '#007AF5'
              }
            },
            {
              value: transferOverTime ? transferOverTime : 0,
              // value: 80, // 转三线处理超时
              itemStyle: {
                color: '#9ec81e'
              }
            }
          ]
        }
      ]
    };
    option && myChart.value.setOption(option);
  };
  const pirBoxPend = () => {
    if (myCharts.value != null && myCharts.value != '' && myCharts.value != undefined) {
      myCharts.value.dispose();
    }
    myCharts.value = proxy.$ECharts.init(document.getElementById('echats_process'));
    let option;
    let { unclaimed, processing, toCmsj, transferDeal } = operList.value ? operList.value : 0;
    const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          silent: true,
          // lengendHoverLink: false,
          // animation: false,
          cursor: 'pointer',
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|当前处理}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              // c: {
              //     fontSize: 20,
              //     fontWeight: "bold",
              //     color: "#46545D ",
              //     lineHeight: "28",
              // },
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: ary.value,
              // value: 100,
              name: '当前处理',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: 'Access From',
          silent: true,
          // lengendHoverLink: false,
          // animation: false,
          type: 'pie',
          cursor: 'pointer',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          data: [
            {
              value: unclaimed ? unclaimed : 0,
              // value: 20,
              itemStyle: {
                color: '#fc6f5e'
              }
            },
            {
              value: processing ? processing : 0,
              // value: 20,
              itemStyle: {
                color: '#007af5'
              }
            },
            {
              value: toCmsj ? toCmsj : 0,
              // value: 20,
              itemStyle: {
                color: '#27d7b0'
              }
            },
            {
              value: transferDeal ? transferDeal : 0,
              // value: 100,
              itemStyle: {
                color: '#9ec81e'
              }
            }
          ]
        }
      ]
    };

    option && myCharts.value.setOption(option);
    // myCharts.value.getZr().on('mousemove', (param) => {
    //   const pointInPixel = [param.offsetX, param.offsetY];
    //   if (myCharts.value.containPixel('grid', pointInPixel)) {
    //     //若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手
    //     myCharts.value.getZr().setCursorStyle('pointer');
    //   } else {
    //     myCharts.value.getZr().setCursorStyle('default');
    //   }
    // });
  };
  const Backlog_alarm = (data: string) => {
    if (overstock.value != null && overstock.value != '' && overstock.value != undefined) {
      overstock.value.dispose();
    }
    overstock.value = proxy.$ECharts.init(document.getElementById('stock'));
    let option;
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          // silent: true,
          // lengendHoverLink: false,
          // animation: false,
          cursor: 'pointer',
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|当前积压\n告警系统}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              // value: 50,
              value: data?.backlogCount ? data?.backlogCount : 0,
              name: '当前积压告警系统',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: 'Access From',
          type: 'pie',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              // value: unclaimed ? unclaimed : 0,
              value: 20,
              itemStyle: {
                color: '#ff0000'
              }
            },
            {
              // value: processing ? processing : 0,
              value: 20,
              itemStyle: {
                color: '#ed702d'
              }
            }
          ]
        }
      ]
    };

    option && overstock.value.setOption(option);
  };
  const order_amountList = (type: striing, count: striing) => {
    if (order_amount.value != null && order_amount.value != '' && order_amount.value != undefined) {
      order_amount.value.dispose();
    }
    order_amount.value = proxy.$ECharts.init(document.getElementById('order_amountEcharts'));
    let option;
    option = {
      tooltip: {
        trigger: 'item'
      },
      grid: {
        top: '15',
        bottom: '20%',
        left: '7%',
        right: '15'
      },
      xAxis: {
        type: 'category',
        data: type,
        axisLabel: {
          rotate: -40
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: count,
          type: 'bar'
          // colorBy: 'data'
        }
      ]
    };
    option && order_amount.value.setOption(option);
  };
  const order_amountList_sys = (type: striing, count: striing) => {
    if (key_system.value != null && key_system.value != '' && key_system.value != undefined) {
      key_system.value.dispose();
    }
    key_system.value = proxy.$ECharts.init(document.getElementById('key_systemEcharts'));
    let option;

    option = {
      tooltip: {
        trigger: 'item'
      },
      grid: {
        top: '15',
        bottom: '25%',
        left: '7%',
        right: '30'
      },
      xAxis: {
        type: 'category',
        data: type,
        triggerEvent: true,
        // 设置文本过长超出隐藏...表示
        axisLabel: {
          // interval: 0,
          rotate: -40,
          formatter: function (params) {
            var val = '';
            if (params.length > 6) {
              val = params.substr(0, 6) + '...';
              return val;
            } else {
              return params;
            }
          }
        }
        // axisLabel: {
        //   interval: 0,
        //   // rotate: 60,
        //   formatter: function (value) {
        //     var ret = ''; //拼接加\n返回的类目项
        //     var maxLength = 2; //每项显示文字个数
        //     var valLength = value.length; //X轴类目项的文字个数
        //     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
        //     if (rowN > 1) {
        //       //如果类目项的文字大于3,
        //       for (var i = 0; i < rowN; i++) {
        //         var temp = ''; //每次截取的字符串
        //         var start = i * maxLength; //开始截取的位置
        //         var end = start + maxLength; //结束截取的位置
        //         //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
        //         temp = value.substring(start, end) + '\n';
        //         ret += temp; //凭借最终的字符串
        //       }
        //       return ret;
        //     } else {
        //       return value;
        //     }
        //   }
        // }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: count,
          type: 'bar'
          // colorBy: 'data',
          // barWidth: '45'
        }
      ]
    };
    option && key_system.value.setOption(option);
  };
  // 传参跳转;
  const Operation_Detail = (num: Number) => {
    router.push({
      name: 'Operation_list',
      params: {
        type: num
      }
    });
  };
  const GoCurrentProcess = () => {
    router.push({
      name: 'CurrentProcess'
    });
  };
  const GoCurrentProcessList = (num: Number) => {
    router.push({
      name: 'CurrentProcessList',
      params: {
        type: num
      }
    });
  };
  const goData_monitoring = (num: Number) => {
    router.push({
      name: 'data_monitoring',
      params: {
        type: num
      }
    });
  };
  watch(props, () => {
    getFmbizs_list();
    getFmbizTotal_count();
    getFmbizTotalBySys_list();
    getFmkbSys();
  });
</script>
<style scoped lang="less">
  .Operation {
    // display: flex;
    // flex-direction: column;
    // box-sizing: border-box;
    .abnormal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // height: 120px;
      .classification {
        display: flex;
        align-items: center;
        width: 32%;
        #echats_Abnormal,
        #echats_process {
          width: 100px;
          height: 100px;
          background: #ebeff5;
          border-radius: 50%;
          margin-right: 10px;
        }
        :deep(#echats_process > div > canvas:hover) {
          cursor: pointer;
        }
        .Abnormal_classification {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
          margin: 0 auto;
          margin-left: 10px;
          width: calc(100% - 110px);

          //padding-left: 40px;
          .decompose {
            display: flex;
            justify-content: space-between;
            // width: 140px;
            height: 17px;
            margin: 0;
            padding: 0;
            cursor: pointer;
            span {
              display: inline-block;
            }
            .number {
              font-size: 12px;
              font-weight: bold;
            }
            .title {
              font-size: 12px;
              font-weight: 400;
              color: #7b868d;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          &.process_data {
            justify-content: center;
          }
        }
      }
      .rightBox {
        width: 32%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .innerLayer {
          width: 100px;
          height: 100px;
          background: #fff;
          border-radius: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: 10px solid #fc6f5e;
          box-sizing: border-box;
          cursor: pointer;
          .number {
            font-size: 20px;
            font-weight: bold;
            color: #46545d;
            text-align: center;
          }
          .tip {
            font-size: 14px;
            font-weight: 400;
            color: #7b868d;
            line-height: 20px;
          }
        }
        .completed_resubmit {
          margin-left: 10px;
          .situation {
            width: 128px;
            height: 36px;
            background: rgba(70, 84, 93, 0.1);
            cursor: pointer;
            border-radius: 6px;
            padding: 0 10px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .Num {
              font-size: 14px;
              font-weight: bold;
              /*   float: right; */
            }
            .title_tip {
              // display: block;
              // height: 100%;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              // font-weight: 400;
            }
            &.completed {
              margin-bottom: 4px;
            }
          }
        }
      }
    }
    .bottom {
      height: calc(100% - 120px);
      position: relative;
      // display: flex;
      // justify-content: space-between;
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 14px;
        font-weight: bold;
        color: #46545d;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 10px;
      }
      .ring {
        width: 49%;
        height: 100%;
        padding-top: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // flex-direction: column;
        box-sizing: border-box;
        // padding-left: 20px;
        position: relative;
        .innerLayer {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          cursor: pointer;
          .number {
            font-size: 20px;
            font-weight: bold;
            color: #46545d;
            text-align: center;
          }
          .tip {
            font-size: 12px;
            font-weight: 400;
            color: #46545d;
            line-height: 20px;
            text-align: center;
          }
          &.one {
            border: 10px solid #ff0000;
          }
          &.two {
            border: 10px solid #ffff00;
          }
          &.three {
            border: 10px solid #ed702d;
          }
        }
        #stock {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
        .title {
          font-size: 14px;
          font-weight: bold;
          color: #46545d;
          padding: 0;
          margin: 0;
          position: absolute;
          top: 10px;
        }
      }
      /* .ring {
        width: 130px;
        height: 100%;
        .situation {
          height: 36px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          background: rgba(70, 84, 93, 0.1);
          align-items: center;
          border-radius: 6px;
          padding: 0 10px;
          box-sizing: border-box;
          cursor: pointer;
          .typeNum {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
          }
          .type {
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &.completed {
            margin-bottom: 4px;
          }
        }
      } */
      .tabEchart {
        height: 100%;
        // width: 100%;
        width: 49%;
        .el-tabs {
          width: 100%;
          height: 100%;
          :deep(.el-tabs__header) {
            margin-bottom: 0;
          }
          :deep(.el-tabs__nav-wrap::after) {
            height: 0;
          }
          :deep(.el-tabs__nav-wrap) {
            .el-tabs__nav {
              float: right;
            }
          }
          :deep(.el-tabs__content) {
            height: calc(100% - 40px);
            .el-tab-pane {
              height: 100%;
              #order_amountEcharts,
              #key_systemEcharts {
                width: 100%;
                height: 100%;
                :deep(div > canvas) {
                  width: 100%;
                  height: 100%;
                }
              }
              .context {
                .van-empty {
                  width: 187px;
                  height: 195.5px;
                  padding: 0;
                  margin: 0;
                  position: absolute;
                  top: 165px;
                  left: 50%;
                  transform: translate(-50%, 0);
                  img {
                    width: 187px;
                    height: 195.5px;
                  }
                }
              }
            }
          }
        }
      }
      .line {
        height: 80%;
        border: 1px solid #f4f4f4;
        position: relative;
        bottom: -15%;
      }
    }
  }
</style>
